<style>
.ivu-cascader-menu-item{
    padding-right: 0px !important;
}
.map_view{
  width: 100%;
  height: 300px;
}
.anchorBL{
  visibility: hidden;
}
</style>
<template>
    <div>
        <Row type="flex" justify="center" align="middle" class="code-row-bg">
            <Col span="20" v-if="!add">
                <!--创建人 发布人 发布人 信息-->
                <Form :label-width="100">
                    <Row>
                    <Col span="12">
                        <Col span="12">
                            <Form-item label="编号" >
                                {{ info.code }}
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="状态" >
                                {{ $t("isactive_"+info.isactive) }}
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="工种" >
                                {{ info.worktype}}
                            </Form-item>
                        </Col>
                        <Col span="24">
                            <Form-item label="创建时间" >
                                {{ info.createdate }}
                            </Form-item>
                        </Col>
                    </Col>
                    <Col span="12">
                        <Col span="12">
                            <Form-item label="创建人" >
                                {{ info.coninfo.wname }}
                                <Tag v-if="!info.coninfo.is_realauth" type="border">未实名认证</Tag>
                                <Tag v-if="info.coninfo.is_realauth" color="blue">已实名认证</Tag>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="发布人" >
                                {{ info.release_user|| info.coninfo.wname}}
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="性别" >
                                {{ info.coninfo.gender }}
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="年龄" >
                                {{ info.coninfo.wage }}
                            </Form-item>
                        </Col>
                        <Col span="24">
                            <Form-item label="关闭时间" >
                                {{ info.unactivetime }}
                            </Form-item>
                        </Col>
                    </Col>
                    </Row>
                </Form>
                <Form :label-width="100" v-if="!edit">
                    <Row>
                    <Col span="12">
                        <Form-item label="手机号">
                            {{ formData.telno }}
                        </Form-item>
                        <Form-item label="单日工资">
                            {{ formData.daysalary }}元
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="地址">
                            {{ formData.city }}&nbsp;&nbsp;{{ formData.disc }}
                        </Form-item>
                        <Form-item label="详细地址">
                            {{ formData.address }}
                        </Form-item>
                    </Col>
                    <Col span="24">
                        <Form-item label="简介">
                            {{ formData.disstr }}
                        </Form-item>
                    </Col>
                    <Col span="24">
                        <Form-item label="详细" prop="info">
                            {{ formData.info }}
                        </Form-item>
                    </Col>
                    </Row>
                </Form>
            </Col>
            <Col span="20" v-if="edit||add">
                <Form ref="form" :model="formData" :rules="formRule" :label-width="100">
                    <Col span="12">
                        <Form-item label="手机号"  prop="telno">
                            <Input v-model="formData.telno">
                            </Input>
                        </Form-item>
                        <Col span="12">
                            <Form-item label="工种" prop="worktypeid">
                                <Select :filterable="true" label-in-value v-model="formData.worktypeid" @on-change="setWorktype" placeholder="请选择">
                                    <Option v-for="item in worktypelist" :value="item.id" :key="item.id">{{ item.worktype }}</Option>
                                </Select>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="单日工资" prop="daysalary">
                                <Input-number :min="0" v-model="formData.daysalary"></Input-number> 元
                            </Form-item>
                        </Col>
                    </Col>
                    <Col span="12">
                        <Col span="12">
                          <Form-item label="最大拨打电话次数" prop="maxconcount" :label-width="200">
                            <Input-number :min="0" v-model="formData.maxconcount"></Input-number>
                          </Form-item>
                        </Col>
                        <Col span="12">
                          <Form-item label="地址" prop="addressarr">
                              <Cascader  :data="address1" size="large" v-model="formData.addressarr" placeholder="市/区" @on-change="setaddress"></Cascader>
                          </Form-item>
                        </Col>
                        <Col span="24">
                          <Form-item label="详细地址" prop="address">
                              <!--<Button type="text" @click="showmap">请选择</Button> -->
                              <Input v-model="formData.address"></Input>
                          </Form-item>
                        </Col>
                    </Col>
                     <Col span="24">
                        <Form-item label="简介" prop="disstr">
                            <Input v-model="formData.disstr" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                        </Form-item>
                    </Col>
                    <Col span="24">
                        <Form-item label="详细" prop="info">
                            <!--<editor ref="editor" :value="content" @on-change="setinfo"/>-->
                            <Input v-model="formData.info" type="textarea" :autosize="{minRows: 4,maxRows: 10}" placeholder="请输入..." @on-blur="changInfo"></Input>
                        </Form-item>
                    </Col>
                    <Col span="2" offset="18" v-if="add||edit">
                        <Button type="primary" long @click="handleSubmit('form')">提交</Button>
                    </Col>
                    <Col span="2" offset="2" v-if="add||edit">
                        <Button type="warning" long @click="handleReset('form')">重置</Button>
                    </Col>
                </Form>
            </Col>
        </Row>
        <!--<Modal v-model="showaddressmap" width="360">
            <baidu-map class="map_view" :ak="baidumap.ak" :center="baidumap.centerPoint" :zoom="baidumap.zoom">
              <bm-control>
                <input type="text">
                <button>check</button>
              </bm-control>
              <bm-marker :position="baidumap.centerPoint" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label :content="baidumap.center" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
              </bm-marker>
            </baidu-map>
            <div slot="footer">
                <Button type="error" size="large"  >删除</Button>
            </div>
        </Modal>-->
    </div>
</template>
<script>
import { getworktype, saveinvent, updateinvent, getinventinfo } from '@/api/work'
// import { getlocaltion } from '@/api/map'
import Editor from '_c/editor'

// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
// import BmControl from 'vue-baidu-map/components/controls/Control.vue'
// import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
export default {
  name: 'release',
  components: {
    Editor
    // BaiduMap,
    // BmControl,
    // BmMarker
  },
  data () {
    const validatedaysalary = (rule, value, callback) => {
      if (!/^[0-9]*$/.test(value)) {
        return callback(new Error('请输入数字'))
      } else if (value <= 0) {
        return callback(new Error('必须大于零'))
      } else {
        return callback()
      }
    }
    return {
      showaddressmap: false,
      map: {
        ak: '2d70bc5bcd7b20a4ef6bac4c55fe6bd9',
        center: '天津',
        centerPoint: { lng: 117.201509, lat: 39.085318 },
        zoom: 10
      },
      content: '',
      add: true,
      edit: false,
      worktypelist: [], // api获取
      formData: {
        id: 0,
        telno: '',
        addressarr: [],
        city: '',
        disc: '',
        daysalary: 0,
        worktypeid: '',
        worktype: '',
        address: '',
        disstr: '',
        info: '',
        gps_lng: 0,
        gps_lat: 0,
        releaseid: this.$store.state.user.userId,
        maxconcount: 15
      },
      info: {},
      formRule: {
        telno: [
          { type: 'string', required: true, pattern: /^1[3456789]{1}\d{9}$/, message: '手机号错误', trigger: 'blur' }
        ],
        addressarr: [
          { type: 'array', required: true, message: '请选择地址', trigger: 'blur' }
        ],
        worktypeid: [
          { type: 'number', required: true, message: '请选择工种', trigger: 'change' }
        ],
        worktype: [
          { type: 'string', required: true, message: '请选择工种', trigger: 'change' }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        /* daysalary: [
          { required: true, type: 'number', trigger: 'blur', validator: validatedaysalary }
        ], */
        info: [
          { required: true, type: 'string', message: '详细不能为空', trigger: 'blur' }
        ]
      },
      address1: [
        {
          value: '天津市',
          label: '天津市',
          children: [
            {
              value: '和平区',
              label: '和平区'
            },
            {
              value: '河东区',
              label: '河东区'
            },
            {
              value: '河西区',
              label: '河西区'
            },
            {
              value: '南开区',
              label: '南开区'
            },
            {
              value: '河北区',
              label: '河北区'
            },
            {
              value: '红桥区',
              label: '红桥区'
            },
            {
              value: '东丽区',
              label: '东丽区'
            },
            {
              value: '西青区',
              label: '西青区'
            },
            {
              value: '津南区',
              label: '津南区'
            },
            {
              value: '北辰区',
              label: '北辰区'
            },
            {
              value: '武清区',
              label: '武清区'
            },
            {
              value: '宝坻区',
              label: '宝坻区'
            },
            {
              value: '滨海新区',
              label: '滨海新区'
            },
            {
              value: '宁河区',
              label: '宁河区'
            },
            {
              value: '静海区',
              label: '静海区'
            },
            {
              value: '蓟州区',
              label: '蓟州区'
            }
          ]
        }
      ]
    }
  },
  methods: {
    /* setinfo (html, text) {
      this.formData.info = html
    }, */
    setaddress (value, selectedData) {
      this.formData.city = value[0]
      this.formData.disc = value[1]
    },
    setWorktype (data) {
      if (data) {
        this.formData.worktype = data.label
        this.formData.worktypeid = data.value
      }
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (!this.formData.disstr) {
            this.formData.disstr = this.formData.info.substring(0, 10)
          }
          const address = this.formData.city + this.formData.disc + this.formData.address
          // const url = 'https://api.map.baidu.com/geocoding/v3/?output=json&callback=showLocation&ret_coordtype=gcj02ll&address=' + address + '&ak=' + this.map.ak;
          let url = 'https://restapi.amap.com/v3/geocode/geo?output=json&city=' + this.formData.city + '&address=' + address + '&key=' + this.map.ak
          this.$jsonp(url).then(res => {
            if (res.status == 1) {
              const geocodes = res.geocodes[0]
              let location = geocodes.location.split(',')

              // 转坐标
              url = 'https://restapi.amap.com/v3/assistant/coordinate/convert?locations=' + location + '&coordsys=gps&output=json&key=' + this.map.ak
              this.$jsonp(url).then(res => {
                if (res.status == 1) {
                  location = res.locations.split(',')
                  this.formData.gps_lng = location[0]
                  this.formData.gps_lat = location[1]
                  url = 'https://restapi.amap.com/v3/geocode/regeo?output=json&location=' + geocodes.location + '&key=' + this.map.ak
                  this.$jsonp(url).then(res => {
                    if (res.status == 1) {
                      this.formData.town = res.regeocode.addressComponent.township
                      if (this.formData.id > 0) {
                        delete this.formData.addressarr
                        updateinvent(this.formData).then(res => {
                          const data = res.data
                          if (data.code !== 200) {
                            this.$Message.error(data.msg)
                          } else {
                            this.$Message.success('操作成功!')
                            this.setformvalue(this.formData.id)
                          }
                        })
                      } else {
                        delete this.formData.id
                        delete this.formData.addressarr
                        saveinvent(this.formData).then(res => {
                          const data = res.data
                          if (data.code !== 200) {
                            this.$Message.error(data.msg)
                          } else {
                            this.$Message.success('提交成功!')
                            this.handleReset(name)
                          }
                        })
                      }
                    } else {
                      this.$Message.error('坐标转换失败')
                    }
                  })
                  return false
                } else {
                  this.$Message.error('坐标转换失败')
                }
              })
              return false
            } else {
              this.$Message.error('获取坐标失败')
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    setformvalue (id) {
      getinventinfo(id).then(res => {
        const data = res.data
        this.info = data.data
        this.formData = this.info
        this.formData.addressarr = [this.info.city, this.info.disc]
        this.formData.daysalary = this.info.daysalary || 0
        this.formData.telno = this.info.coninfo.telno
        /* this.formData.id = this.info.id
        this.formData.telno = this.info.coninfo.telno
        this.formData.city = this.info.city
        this.formData.disc = this.info.disc
        this.formData.address = this.info.address
        this.formData.worktypeid = this.info.worktypeid
        this.formData.worktype = this.info.worktype
        this.formData.disstr = this.info.disstr
        this.formData.info = this.info.info
        this.formData.gps_lng = this.info.gps_lng
        this.formData.gps_lat = this.info.gps_lat
        this.formData.maxconcount = this.info.maxconcount */
      })
    },
    showmap () {
      this.showaddressmap = true
    },
    changInfo (event) {
      if (!this.formData.disstr) {
        this.formData.disstr = this.formData.info.substring(0, 10)
      }
    }
  },
  mounted () {
    getworktype().then(res => {
      const data = res.data
      this.worktypelist = data.resultData
    })
    if (this.$route.query.id) {
      this.setformvalue(this.$route.query.id)
    }
    if (typeof this.$route.query.edit === 'string') {
      this.add = false
      if (this.$route.query.edit === 'true') {
        this.edit = true
      } else {
        this.edit = false
      }
    }
  }
}
</script>
